<template>
  <div ref="chartRef" style="width: 100%; height: 360px;"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
const chart = ref(null);

const props = defineProps({
  options: {
    type: Object,
    required: true
  }
});

onMounted(() => {
  chart.value = echarts.init(chartRef.value);
  chart.value.setOption(props.options);
});

watch(() => props.options, (newOptions) => {
  chart.value.setOption(newOptions);
}, { deep: true });
</script>